import React from "react";
import { Dimensions, Modal, StyleSheet, Text, TouchableOpacity, TouchableWithoutFeedback, View } from "react-native";
import { StoreEntry } from "../models/store_entry";

type StoreModalProps = {
    visible: boolean;
    GUID: string;
    onConfirm: (itemModel: StoreEntry) => void;
    onCancle: () => void;
}

const StoreModal: React.FC<StoreModalProps> = ({ visible, GUID, onConfirm, onCancle }) => {

    const mockStores: StoreEntry[] = [
        { GUID: "1", Name: "天河店" },
        { GUID: "2", Name: "白云店" },
        { GUID: "3", Name: "海珠店" },
    ];


    return <>
        <Modal visible={visible} transparent animationType="fade">
            <TouchableWithoutFeedback onPress={onCancle}>
                <View style={styles.modalOverlay}>
                    <View style={styles.modalContent}>
                        {mockStores.map((store) => (
                            <TouchableOpacity
                                key={store.GUID}
                                style={styles.storeItem}
                                onPress={() => {
                                    onConfirm(store);
                                }}
                            >
                                <Text
                                    style={[
                                        styles.storeText,
                                        GUID === store.GUID && styles.activeStoreText,
                                    ]}
                                >
                                    {store.Name}
                                </Text>
                            </TouchableOpacity>
                        ))}
                        <TouchableOpacity
                            onPress={() => onCancle()}
                            style={styles.cancelButton}
                        >
                            <Text style={{ color: "#999" }}>取消</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </TouchableWithoutFeedback>
        </Modal>
    </>
}

export default StoreModal;
const screenWidth = Dimensions.get("window").width;
const styles = StyleSheet.create({
    modalOverlay: {
        flex: 1,
        backgroundColor: "rgba(0,0,0,0.3)",
        justifyContent: "center",
        alignItems: "center",
        paddingHorizontal: 16, // 确保边缘不会顶满屏幕
    },
    modalContent: {
        width: Math.min(screenWidth * 0.9, 400), // 最大宽度 400，不超过屏幕 90%
        backgroundColor: "#fff",
        borderRadius: 12,
        padding: 20,
    },
    storeItem: {
        paddingVertical: 10,
        alignItems: "center",
    },
    storeText: {
        fontSize: 15,
        color: "#333",
    },
    activeStoreText: {
        color: "#007aff",
        fontWeight: "bold",
    },
    cancelButton: {
        marginTop: 10,
        alignItems: "center",
    },
})